<template>
  <div class="ProductList">
    <div class="listtop">
      <van-nav-bar :title="bigtitle" left-text left-arrow @click-left="$router.go(-1)">
        <van-icon name="service-o" slot="right" />
      </van-nav-bar>
      <div class="total-tag">
        <p>综合</p>
        <p>销量</p>
        <p @click="sort(flag)">
          价格
          <span class="up"></span>
          <span class="down"></span>
        </p>
        <p>最新</p>
      </div>
      <div class="small-tag">
        <p>送女友</p>
        <p>送男性</p>
        <p>送朋友</p>
        <p>送长辈</p>
        <div class="choose-btn">筛选</div>
      </div>
    </div>
    <div class="list">
      <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
        <div v-for="(item,index) in prolist" :key="index" class="pro-card">
          <!-- @click="$router.push({name:'Desc'})" -->
          <router-link :to="'/prolist/desc/'+item._id">
            <img :src="item.coverImgUrl" alt="商品图片" />
            <p class="desc">{{item.desc}}</p>
            <p class="price">￥{{item.product_price}}</p>
          </router-link>
        </div>
      </mescroll-vue>
    </div>
  </div>
</template>
<style>
@import "../css/productlist.css";
</style>
<script>
import MescrollVue from "mescroll.js/mescroll.vue";
import axios from "axios";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    MescrollVue // 注册mescroll组件
  },
  data() {
    return {
      prolist: [],
      flag: true,
      bigtitle: "所有鲜花",
      mescroll: null,
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10 //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 5,
        toTop: {
          //回到顶部按钮
          src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
          offset: 1000 //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
          tip: "暂无相关数据~" //提示
        }
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter(); // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
    });
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteLeave方法
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave(); // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next();
  },
  methods: {
    ...mapMutations("product", ["save"]),
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      // 联网请求
      axios
        .get("http://192.168.17.95:3000/api/v1/flowers", {
          params: {
            page: page.num, // 页码
            per: page.size // 每页长度
          }
        })
        .then(response => {
          let arr = response.data.flowers;
          console.log(arr);
          // 如果是第一页需手动置空列表
          if (page.num === 1) this.prolist = [];
          // 把请求到的数据添加到列表
          this.prolist = this.prolist.concat(arr);
          // 数据渲染成功后,隐藏下拉刷新的状态
          console.log(this.prolist);
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length);
          });
          this.save({
            list: res.data.flowers
          });
        })
        .catch(e => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          mescroll.endErr();
        });
    },
    sort(flag) {
      if (flag == true) {
        this.prolist.sort((a, b) => {
          return a.product_price - b.product_price;
        });
      } else {
        this.prolist.sort((a, b) => {
          return b.product_price - a.product_price;
        });
      }
      flag = !flag;
      this.flag = flag;
    }
  },
  computed: {
    ...mapState("product", ["list", "keyword"])
  }
};
</script>
<style scoped>
.van-icon-arrow-left,
.van-icon-service-o {
  color: #000;
}
/*通过fixed固定mescroll的高度*/
.mescroll {
  position: fixed;
  top: 44px;
  bottom: 0;
  height: auto;
}
</style>